<template>
  <div class="apply-work-vessel" v-show="applyPopup">
    <div class="apply-work-box">
      <img src="../images/login_close.png" class="apply-pic" @click="closeApplySuccess"/>
      <span class="apply-title">报名企业</span>
      <span class="apply-text">企业报名需要填写真实姓名，报名成功后，驻厂会尽快与您联系，请耐心等待</span>
      <img src="../images/success.png" class="apply-suc"/>
      <span class="apply-user-name">恭喜您，报名成功</span>
      <button type="button" class="apply-user-btn" @click="lookApplySuccess">查看面试预约</button>
    </div>
  </div>
</template>

<script>
  import {clearCache} from "../config/verify";

  export default {
    props: {
      showApplySuccess: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        applyPopup: false,
      }
    },
    created() {
      this.applyPopup = this.showApplySuccess;
    },
    methods: {
      closeApplySuccess() {
        this.applyPopup = false;
        this.$emit("closeApplySuccess");
      },
      lookApplySuccess() {
        clearCache();
        this.applyPopup = false;
        this.$emit("lookApplySuccess");
      }
    },
    watch: {
      showApplySuccess(newVal, oldVal) {
        this.applyPopup = newVal;
      },
      applyPopup(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .apply-work-vessel {
    .fixed-center(fixed, 100, 0.5);
    .apply-work-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(640px, 450px);
      background: rgba(252, 254, 255, 1);
      border-radius: 4px;
      .apply-pic {
        .wh(20px, 20px);
        margin-left: auto;
        margin-right: 15px;
        padding-top: 16px;
      }
      .apply-title {
        padding-top: 5px;
        padding-bottom: 18px;
        .size-color-weight(20px, #333, bold);
      }
      .apply-text {
        width: 294px;
        line-height: 24px;
        text-align: center;
        .size-color(14px, #999999)
      }
      .apply-suc {
        padding-top: 40px;
        padding-bottom: 24px;
        .wh(72px, 72px);
      }
      .apply-user-name {
        .size-color(16px, #4D4D4D)
      }
      .apply-user-val {
        .wh(280px, 48px);
        background: rgba(245, 245, 245, 1);
        border: 1px solid rgba(235, 235, 235, 1);
        border-radius: 4px;
        padding-left: 14px;
      }
      .apply-user-btn {
        text-align: center;
        line-height: 48px;
        margin-top: 36px;
        .wh(294px, 48px);
        background: rgba(60, 175, 255, 1);
        border-radius: 4px;
        .size-color(16px, #FFFFFF);
      }
    }
  }
</style>
